<template>
    <div class="clock-container">
      <div class="time">
        <span class="date">{{ nowTime }}</span>
        <span class="hour" style="margin-left: 10px;">{{ time.hour }}</span>
        <span class="split">:</span>
        <span class="minitus">{{ time.minitus }}</span>
        <span class="split">:</span>
        <span class="seconds">{{ time.seconds }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "DateUtils",
    props: ["s"],
    data() {
      return {
        time: {
          hour: "",
          minitus: "",
          seconds: ""
        },
        nowTime: "",
        week: [
          "星期天",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六"
        ]
      };
    },
    mounted() {
      this.dateTime();
    },
    methods: {
      dateTime() {
        this.timeFormate();
        setTimeout(() => {
          this.dateTime();
        }, 1000);
      },
      timeFormate() {
        const newtime = new Date();
        this.time.hour = this.getIncrease(newtime.getHours(), 2);
        this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
        this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);
        this.nowTime =
          this.getIncrease(newtime.getFullYear(), 4) +
          "年" +
          this.getIncrease(newtime.getMonth() + 1, 2) +
          "月" +
          this.getIncrease(newtime.getDate(), 2) +
          "日 " +
          this.week[newtime.getDay()];
      },
      getIncrease(num, digit) {
        var increase = "";
        for (var i = 0; i < digit; i++) {
          increase += "0";
        }
        return (increase + num).slice(-digit);
      }
    }
  };
  </script>
  
  <style scoped>
  .clock-container {
    padding: 30px;
    font-size: 30px;
    /* background: #f4f4f9; */
    /* border-radius: 10px; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    text-align: center;
  }
  
  .time {
    display: inline-block;
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  .date {
    font-size: 2rem;
    color: #666;
    margin-bottom: 10px;
  }
  
  .hour,
  .minitus,
  .seconds {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
  }
  
  .split {
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin: 0 5px;
    color: #999;
    font-size: 2.5rem;
  }
  
  @keyframes blink {
    0%,
    100% {
      opacity: 1;
    }
  
    50% {
      opacity: 0;
    }
  }
  </style>
  